<template>
  <div class="h100">
    <div class="home-bac">
      <img src="~@/assets/reception/background1.png" alt="" >
    </div>
    <div class="home-main">
      <div class="service">
        <span class="service-title">服务项目</span>
        <span class="service-content">我们再工商、财务、金融、投资等各个相关领域取得想对成绩</span>
        <div class="service-bac">
          <div class="service-class-item">
            <span class="service-item-title">服务保障</span>
            <img src="~@/assets/reception/serviceItems/guarantee.png" alt="">
            <span class="service-item-content">无论服务的标准怎样变化，我们的服务品质始终保持一贯的水准，为您的成功保驾护航</span>
          </div>
          <div class="service-class-item">
            <span class="service-item-title">服务价格</span>
            <img src="~@/assets/reception/serviceItems/price.png" alt="">
            <span class="service-item-content">我们提供的服务不仅高品质，而且价格亲民，您将获得极大的性价比</span>
          </div>
          <div class="service-class-item">
            <span class="service-item-title">服务承诺</span>
            <img src="~@/assets/reception/serviceItems/acceptance.png" alt="">
            <span class="service-item-content">用专业诠释服务，用诚信赢得信赖。我们的服务是让每一位客户感到满意，让每一次合作都成为一次成功的案例</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'serviceItems',
  methods: {
    onSearch(value) {
      console.log(value);
    },
  },
}
</script>

<style lang="less" scoped>
.home-bac{
  img{
    height: 230px;
    width: 100%;
  }
}
.home-main{
  margin-top:30px ;
  // margin-bottom:80px ;
  .service{
    margin: 0 auto;
    height: 380px;
    width: 1600px;
    // padding: 0 20px;
    .service-bac{
      height: 100%;
      display: flex;
      .service-class-item{
        width: 500px;
        margin: 0 auto;
        height: 360px;
        border: solid 3px #eaeaea;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        img{
          display: block;
          width: 400px;
          height: 220px;
          margin: 0 auto;
        }
        .service-item-title{
          display: block;
          width: 100%;
          text-align: center;
          margin: 10px auto;
          color: #000;
          margin-bottom: 0;
          font-size: 30px;
        }
        .service-item-content{
          display: block;
          width: 400px;
          margin: 15px auto;
        }
      }
    }

    .service-title{
      color: #1e50ae;
      font-size:24px ;
      display: block;
      text-align: center;
      width: 100%;
    }
    .service-content{
      display: block;
      text-align: center;
      width: 100%;
    }
    .service-search{
      margin: 20px auto;
      margin-top:0;
      padding-top: 20px;
      width: 1500px;
      .ant-input-group .ant-input{
        border: none;
        background: #edf2f5;
      }
    }
    .service-hot{
      margin: 0 20px;
      img{
        height: 24px;
      }
    }
  }
}
</style>